<template>
    <div id="view_localUser" class="home-page-contianer">
        <div class="banner-alert">
            <div style="position: relative; width: 100%">
                <span class="text d-phone-none" v-if="compControl.user_type_control.status === true">
                    本地用户已启用
                </span>
                <span
                    class="text"
                    style="color: orangered"
                    v-if="compControl.user_type_control.status === false">
                    本地用户已禁用
                </span>
            </div>
            <span class="error" v-if="typeof compControl.user_type_control.status === 'string'">
                错误:{{ compControl.user_type_control.status }}
            </span>
        </div>
        <n-tabs
            type="line"
            class="home-page-tabs"
            animated
            :value="compControl.tab_control.activeName"
            :on-before-leave="compControl.tab_control.handleSwitchPane">
            <n-tab-pane name="service" tab="本地用户列表">
                <v_userlist />
            </n-tab-pane>
            <n-tab-pane name="right" tab="本地用户权限管理">
                <v_right />
            </n-tab-pane>
        </n-tabs>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import v_userlist from './v_local_userlist.vue'
import v_right from './v_local_right.vue'
import v_config from './v_local_config.vue'
import { axg_getUserTypeStatus } from '@/utils/interface/User'

const compControl = reactive({
    tab_control: {
        activeName: 'service',
        handleSwitchPane(name: string, _oldname: string) {
            if (name == '') {
            } else if (name == '') {
            } else if (name == 'log') {
            }
            compControl.tab_control.activeName = name
        }
    },
    user_type_control: {
        status: null as boolean | string | null,
        async handleGetUserTypeStatus() {
            compControl.user_type_control.status = await axg_getUserTypeStatus('local')
        },
        handleSwitchStatus() {}
    }
})
onMounted(() => {
    compControl.tab_control.handleSwitchPane(compControl.tab_control.activeName, '')

    compControl.user_type_control.handleGetUserTypeStatus()
})
</script>

<style lang="scss" scoped>
@use '@/components/framework/framework';
#view_localUser {
    .banner-alert {
        padding-left: 0.5rem;
        white-space: nowrap;
        .text {
            color: green;
            position: absolute;
            right: 0.75rem;
            margin-top: 0.5rem;
        }
    }
}
</style>
